<template>
  <section>
    <div class="title">
      <h2>Power</h2>
      <p @click="change('power', power)"><i :class="{'ischosed': power}"></i></p>
    </div>
    <h3>{{power? name : ''}}</h3>
    <div class="range">
      <span><i ref="slideBar"></i></span>
    </div>
    <div class="title">
      <h2>Bank</h2>
      <p @click="change('bank', bank)"><i :class="{'ischosed': bank}"></i></p>
    </div>
  </section>
</template>

<script>
export default {
  props: ['power', 'bank', 'name'],
  components: {
  },
  methods: {
    change (name, val) {
      this.$emit(`update:${name}`, !val)
    }
  },
  mounted () {
    // 获取滑块
    this.slideBar = this.$refs.slideBar
    this.lMax = this.slideBar.parentNode.getBoundingClientRect().width - this.slideBar.getBoundingClientRect().width
    this.slideBar.addEventListener('mousedown', (e) => {
      // 开启滑动
      this.moveable = true
      // 记录下表初始点击位置
      this.sPos = { left: e.clientX }
      // 记录滑块的初始相对位置
    })
    document.addEventListener('mousemove', (e) => {
      if (this.moveable) {
        // 记录鼠标x轴移动距离：鼠标滑动位置与初始点击位置的差值0
        let l = (e.clientX - this.sPos.left) + this.originLeft
        if (l < 0) l = 0 // 最小移动距离
        if (l > this.lMax) {
          l = this.lMax
        } // 最大移动距离
        this.slideBar.style.left = l + 'px'
      }
    })
    document.addEventListener('mouseup', (e) => {
      if (this.moveable) {
        this.moveable = false
        this.originLeft = this.slideBar.offsetLeft
        this.volume = this.originLeft / this.lMax
      }
    })
    console.log(this.slideBar.offsetLeft, this.lMax)
    this.volume = this.slideBar.offsetLeft / this.lMax
    console.log(this.volume)
  },
  data () {
    return {
      sPos: {
        left: 0
      },
      originLeft: this.$refs.slideBar.offsetLeft,
      ePos: 0,
      lMax: 225,
      moveable: false,
      volume: this.$refs.slideBar.offsetLeft / this.lMax,
      slideBar: {}
    }
  }
}
</script>

<style lang='scss' scoped>
  section{
    width: 400px;
    height: 580px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    h3{
      width: 200px;
      height: 80px;
      color: #fff;
      text-align: center;
      line-height: 80px;
      background: rgba(0, 0, 0, 0.8);
    }
    .range{
      width: 250px;
      height: 30px;
      background: -webkit-linear-gradient(left,#fff,rgb(255, 182, 182),rgb(255, 130, 130));
      border-radius: 15px;
      box-shadow: 0 0 2px 3px rgb(72, 71, 71);
      span{
        display: block;
        position: relative;
        width: 250px;
        text-align: center;
        height: 30px;
        i{
          display: block;
          position: absolute;
          border-radius: 15px;
          width: 25px;
          height: 50px;
          cursor: pointer;
          top: -10px;
          left: 112.5px;
          border: 2px solid rgb(0, 0, 0);
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 2px 3px rgb(0, 221, 255) inset;
          background-color:rgb(176, 0, 0);
        }
      }
    }
    .title{
      width: 250px;
      height: 100px;
      text-align: center;
      border-radius: 25px;
      box-shadow: 0 0 5px 3px rgba(0,0,0,.1);
      h2{
        display: block;
        width: 100%;
        height: 45px;
        text-align: center;
        user-select: none;
        font: normal 600 30px/45px "楷体";
      }
      P{
        width: 100px;
        height: 35px;
        cursor: pointer;
        margin: 0 auto;
        border-radius: 15px;
        background-color: #8c8c8c;
        box-shadow: 1px 1px 5px 3px rgb(0,0,0);
        position: relative;
        i{
          display: block;
          width: 40px;
          height: 25px;
          background-color: rgb(50, 48, 46);
          position: absolute;
          border-radius: 10px;
          border: 3px solid black;
          box-shadow: 0 0 2px 0 rgba(0,0,0,.8), 0 0 3px 0 #d60000 inset;
          top: 5px;
          left: 5px;
          transition: background .5s, left .5s;
        }
        .ischosed{
          left:55px;
          background-color: red;
        }
      }
    }
  }
</style>
